<template>
	<view class="bg">
		<view class="title">
			色弱小测试
		</view>
		<view class="rules">
			找出所有色块里颜色不同的一个
		</view>
		<view class="start_game">
			<button id="btn_start" type="default" @click="startGame">开始</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			// 显示加载中，500毫秒之后消失
			this.loading();
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 显示加载中，500毫秒之后消失
			loading(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 500)
			},
			// 点击开始按钮开始游戏
			startGame(){
				uni.navigateTo({
					url: '/pages/games/achromatismTestDetail'
				})
			},
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../static/css/basic.css');

	.title {
		width: 100%;
		padding-top: 30px;
		text-align: center;
		color: #ff557f;
		font-weight: 600;
		font-size: 28px;
	}

	.rules {
		width: 100%;
		margin-top: 50px;
		text-align: center;
		color: #c282c2;
		font-size: 15px;
	}

	.start_game {
		margin-top: 150px;
		text-align: center;

		button {
			width: 150px;
			height: 65px;
			color: #f5f5f5;
			font-size: 25px;
			font-weight: 600;
			background-color: #f4517a;
			box-shadow: 3px 3px 6px #848484;
		}
	}
</style>
